<template>
  <van-dialog
    :show="show"
    :title="lang.share_dialog_title"
    destroyOnClose
    className="custom-dialog"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="warpbox">
      <div class="warp warp1">
        <p>{{ lang.share_dialog_total_money }}</p>
        <span>
          <NuxtImg src="/images/activity/clipdoll/coip.png" alt="" />
          {{ userStore.moneyUnit }}{{ totalAmount }}
        </span>
      </div>

      <div class="warp warp2">
        <p>{{ lang.share_dialog_payment_methods }}</p>
        <div class="prog">
          <div class="level">
            <div class="level-box">
              <div
                v-for="(step, index) in paymentSteps"
                :key="index"
                class="dian"
                :class="step.state ? 'state1' : 'state0'"
              >
                <NuxtImg :src="step.icon" alt="" />
              </div>
            </div>
            <div class="xian-box">
              <div class="xian" :class="{ xianc: paymentSteps[0].state }"></div>
              <div class="xian" :class="{ xianc: paymentSteps[1].state }"></div>
            </div>
            <div class="text-box">
              <div
                v-for="(step, index) in paymentSteps"
                :key="index"
                class="text"
                :class="step.state ? 'state1' : 'state0'"
              >
                <p v-html="step.text"></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <p class="benefícios">{{ lang.share_dialog_benefits }}</p>

      <div class="myLink">
        <div class="title">{{ lang.share_dialog_my_link }}</div>
        <div class="box_link">
          <span class="share_link">{{ shareLink }}</span>
          <div class="btn heat_btn2" v-click-move @click="copyText(shareLink)">
            {{ lang.share_dialog_more }}
          </div>
        </div>
        <div class="title">{{ lang.share_dialog_quick_share }}</div>
        <div class="QuickShare">
          <div
            v-for="platform in sharePlatforms"
            :key="platform.name"
            class="item heat_btn2"
            v-click-move
            @click="handleShare(platform)"
          >
            <NuxtImg
              :src="platform.icon"
              :alt="platform.name"
              width="40"
              height="40"
            />
            <p>{{ platform.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/clipdoll");
const userStore = useUserStore();

const props = defineProps(["show"]);
const emit = defineEmits(["changeDialog"]);

// 数据
const totalAmount = ref("74.91");
const shareLink = ref("https://www.brz99.com/?code=4154730&invite_source=1");

// 支付步骤数据
const paymentSteps = ref([
  {
    state: true,
    icon: "/images/activity/clipdoll/dui.png",
    text: lang.share_dialog_payment_submitted,
  },
  {
    state: true,
    icon: "/images/activity/clipdoll/dui.png",
    text: `${lang.share_dialog_still_needed}<br /><span style="color: var(--theme-dec4);">13.09</span><br />${lang.share_dialog_for_withdrawal}`,
  },
  {
    state: false,
    icon: "/images/activity/clipdoll/dui.png",
    text: lang.share_dialog_pix_payment,
  },
]);

// 分享平台数据
const sharePlatforms = ref([
  {
    name: lang.share_dialog_facebook,
    icon: "/images/share/treasureChest_1.png",
  },
  {
    name: lang.share_dialog_whatsapp,
    icon: "/images/share/treasureChest_2.png",
  },
  {
    name: lang.share_dialog_telegram,
    icon: "/images/share/treasureChest_3.png",
  },
  {
    name: lang.share_dialog_instagram,
    icon: "/images/share/treasureChest_4.png",
  },
  {
    name: lang.share_dialog_twitter,
    icon: "/images/share/treasureChest_5.png",
  },
  {
    name: lang.share_dialog_kwai,
    icon: "/images/share/treasureChest_6.png",
  },
]);

// 处理分享
const handleShare = (platform: any) => {
  // TODO: 实现分享功能
  console.log("Share to:", platform.name);
};

function beforeClose() {
  emit("changeDialog", false);
}
</script>

<style scoped lang="scss">
.warpbox {
  width: 100%;
  padding: 0.6rem 0.4rem 0;

  .warp {
    color: var(--theme-neutral1);

    &.warp1 {
      font-size: 0.36rem;
      text-align: center;

      span {
        height: 1rem;
        margin-top: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.6rem;

        img {
          width: 1rem;
          margin-right: 0.2rem;
        }
      }
    }

    &.warp2 {
      margin-top: 0.5rem;

      p {
        text-align: start;
      }

      .prog {
        margin-top: 0.5rem;

        .level {
          .level-box {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 1;
            padding: 0 0.8rem;

            .dian {
              width: 0.5rem;
              height: 0.5rem;
              background: gray;
              border-radius: 50%;

              img {
                width: 0.5rem;
                position: absolute;
                top: 0;
                display: none;
              }

              &.state1 img {
                display: block;
              }
            }
          }

          .xian-box {
            display: flex;
            position: relative;
            top: -0.25rem;
            padding: 0 0.8rem;

            .xian {
              width: 100%;
              height: 0.06rem;
              background: gray;

              &.xianc {
                background: var(--theme-dec4);
              }
            }
          }

          .text-box {
            display: flex;
            justify-content: space-between;
            margin-top: 0.1rem;

            .text {
              width: 2.15rem;
              height: 2.39rem;
              background: #ffffff0d;
              border-radius: 0.2rem;
              padding: 0.1rem;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.34rem;
              p {
                text-align: center;
              }

              span {
                color: var(--theme-dec4) !important;
              }
            }
          }
        }
      }
    }
  }
}

.benefícios {
  margin-top: 0.25rem;
  font-size: 0.36rem;
  color: var(--theme-dec4);
}

.myLink {
  width: 100%;
  margin: 0.3rem auto;

  .title {
    margin-bottom: 0.25rem;
    font-size: 0.38rem;
    color: var(--theme-neutral1);
  }

  .box_link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 0.3rem;

    .share_link {
      height: 100%;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: var(--theme-color9);
      border-radius: 0.2rem;
      border: 0.03rem solid var(--theme-color8);
      display: flex;
      align-items: center;
      padding: 0 0.4rem;
      font-family: Arial;
      font-size: 0.32rem;
      line-height: 0.36rem;
      color: var(--theme-neutral2);
    }

    .btn {
      width: 2.2rem;
      height: 1rem;
      border-radius: 0.2rem;
      background: var(--theme-color1);
      font-size: 0.38rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--theme-neutral1);
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
  }

  .QuickShare {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 16.67%);
    margin-top: 0.4rem;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.17rem;
      cursor: pointer;
      transition: transform 0.2s ease;

      img {
        width: 1rem;
        height: 1rem;
      }

      p {
        color: var(--theme-neutral2);
        font-size: 0.285rem;
      }
    }
  }
}
</style>
